<template>
	<checkbox-group @change="change" ref="QS-Checkbox" class="QS-Checkbox" :class="getClass" :style="getStyle">
		<label class="QS-Checkbox_label" :style="{
			marginRight: space,
			marginBottom: space,
			width: itemWidth
		}" v-for="(checkboxItem, checkboxIndex) in itemArray" :key="checkboxIndex">
			<checkbox :value="checkboxItem.value" :checked="getStatus[checkboxIndex]" :disabled="disabled"
				:color="checkboxItem.color || getColor" />
			<text :style="{ fontSize: getFontSize + 'px' }">{{checkboxItem.name}}</text>
		</label>
	</checkbox-group>
</template>

<script>
	import QSComponentMixin from '../../mixins/QS-Components-Mixin.js';
	import QSFormElMixin from '../../js/QS-Form/mixins/QS-Form-El-Mixin.js';
	let props;
	try {
		props = require('@/QS-UI-CONFIG/components/QS-Checkbox/js/props.js');
	} catch (e) {
		//TODO handle the exception
		props = {};
	}
	const componentType = 'QS-Checkbox';
	const QSComponentMixinRes = QSComponentMixin({
		componentType,
		nodeName: '.QS-Checkbox'
	});
	const QSFormElMixinRes = QSFormElMixin({
		componentType
	});

	export default {
		mixins: [
			QSComponentMixinRes.mixin,
			QSFormElMixinRes.mixin,
		],
		props: {
			// #ifdef MP-ALIPAY
			...QSComponentMixinRes.props,
			// #endif
			itemArray: {
				type: Array,
				default: () => []
			},
			color: {
				type: String,
				default: ''
			},
			space: {
				type: String,
				default: '8px'
			},
			itemWidth: {
				type: String,
				default: ''
			},
			...props,
			// #ifdef MP-ALIPAY
			...QSFormElMixinRes.props,
			// #endif
		},
		computed: {
			getStatus() {
				const status = [];
				const value = this.val;
				const itemArray = this.itemArray;
				if (value instanceof Array && value.length > 0) {
					for (let i = 0; i < itemArray.length; i++) {
						const j = value.findIndex(item => item === itemArray[i].value)
						if (j >= 0) {
							status.push(true);
						} else {
							status.push(false);
						}
					}
				} else {
					itemArray.forEach(() => {
						status.push(false);
					})
				}
				return status;
			},
			getColor() {
				return this.color || this.themes[this.theme || 'primary'];
			}
		}
	};
</script>

<style lang="scss" scoped>
	.QS-Checkbox {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-wrap: wrap;
		/* #endif */
		flex-direction: row;
	}

	.QS-Checkbox_label {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
</style>
